<template>
  <div>
    经度<a-input v-model="lon"></a-input> 纬度<a-input v-model="lat"></a-input>
    <el-amap
      vid="amapDemo1"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events"
    >
    </el-amap>
  </div>
</template>
<script>
var _this = null
export default {
  mounted(){
      _this = this
  },
  data() {
    return {
      center: [121.59996, 31.197646],
      zoom: 12,
      lon: 0,
      lat: 0,
      events: {
        click(e) {
          
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          _this.lon = lng
          _this.lat = lat

          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });

          geocoder.getAddress(
            [e.lnglat.lng, e.lnglat.lat],
            function (status, result) {
              console.log("&&&&&&&&&&", _this);
              if (status === "complete" && result.info === "OK") {
                if (result && result.regeocode) {
                  // 具体地址
                  self.address = result.regeocode.formattedAddress;
                  // 省
                  self.province = result.regeocode.addressComponent.province;
                  // 市
                  self.city = result.regeocode.addressComponent.city;
                  // 区
                  self.district = result.regeocode.addressComponent.district;
                }
              } else {
                //alert('地址获取失败')
              }
            }
          );
        },
      },
    };
  },
};
</script>
<style scoped>
.amap-demo {
  height: 400px;
}
</style>